<template>
  <!-- 消防信息 -->
  <div>
    <public-modal
      width="900px"
      :footer="false"
      title="行业信息(旅馆业)"
      modalStyle="detailModal"
      :publicVisible="publicVisible"
      cancelContext="拒绝"
      confirmContext="通过"
      @cancel="cancel"
    >
      <div slot="content">
        <div class="base-info-wrap">
          <div class="common-title">
            <div class="icon"></div>
            <div class="content">基本信息</div>
          </div>

          <div class="content-wrapper">
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">旅馆星级</div>
                <div class="value common-value">
                  {{ getDictType(starRatingType, hotelFeaturesInfo.starRating) }}
                </div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">房间数</div>
                <div class="value common-value">
                  {{ hotelFeaturesInfo.roomCount ? hotelFeaturesInfo.roomCount : '0' }}
                </div>
              </div>
            </div>
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">床位数(个)</div>
                <div class="value common-value">
                  {{ hotelFeaturesInfo.bedCount ? hotelFeaturesInfo.bedCount : '0' }}
                </div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">房客信息录入系统</div>
                <div class="value common-value">
                  {{ hotelFeaturesInfo.inputSystem ? (hotelFeaturesInfo.inputSystem == 1 ? '有' : '无') : '暂无' }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="base-info-wrap" v-if="hotelDeviceDetailList.length > 0">
          <div class="common-title">
            <div class="icon"></div>
            <div class="content">其他设施信息</div>
          </div>

          <div class="content-wrapper" v-for="(item, index) in hotelDeviceDetailList" :key="index">
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">设施 {{ index + 1 }}</div>
                <div class="value common-value">{{ item.deviceName || '暂无' }}</div>
              </div>
              <div class="info-wrap f1">
                <div class="label common-lable">设施数量(个)</div>
                <div class="value common-value">{{ item.deviceCount }}</div>
              </div>
            </div>
            <div class="flex">
              <div class="info-wrap f1">
                <div class="label common-lable">设施图片</div>
                <div class="value common-value click-color cursor" @click="werImg(item.deviceImage)">查看</div>
                <img
                  style="display: none"
                  :id="item.deviceImage"
                  :src="imgPrefix + item.deviceImage"
                  :data-original="imgPrefix + item.deviceImage"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer"></div>
    </public-modal>
  </div>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import publicModal from '@/components/publicModal'
import { comMethods } from '@/mixins/comMethods'
import { getAction } from '@/api/manage'
import { findEnableDictItemsbyCode } from '@/api/api'
export default {
  name: 'detailModal',
  components: { publicModal },
  mixins: [comMethods],
  data() {
    return {
      imgPrefix: '',
      publicVisible: false,

      hotelDeviceDetailList: [],
      hotelFeaturesInfo: {},

      starRatingType: [],
    }
  },
  methods: {
    async getDict() {
      const dictCodes = ['star_rating_type']
      const dictResults = await Promise.all(dictCodes.map((code) => findEnableDictItemsbyCode({ code })))
      this.starRatingType = dictResults[0].result
    },

    getDictType(list, type) {
      let res = list.find((item) => item.value == type)
      if (res && res.title) {
        return res.title
      } else {
        return '暂无'
      }
    },
    show(records) {
      this.companyId = records.companyId
      this.getPublicSecurityDetail()
      this.getDict()
      this.publicVisible = true
    },

    async getPublicSecurityDetail() {
      let {
        result: { hotelDeviceDetailList, hotelFeaturesInfo },
      } = await getAction('/hotel/features_info/detail', {
        companyId: this.companyId,
      })
      if (hotelDeviceDetailList) this.hotelDeviceDetailList = hotelDeviceDetailList
      if (hotelFeaturesInfo) this.hotelFeaturesInfo = hotelFeaturesInfo
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: false,
        button: false,
        navbar: false,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    cancel(target) {
      this.publicVisible = false
    },
  },
}
</script>
<style scoped lang="less">
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}

img {
  display: none;
}
</style>
